<template>
<div id="word-check-detail" class="word-check-detail">

<!--  <el-progress :text-inside="true" :stroke-width="24"-->
<!--               :percentage="parseFloat((wordCheckData.workTrueCount/wordCheckData.workCountAll * 100).toFixed(2)) "-->
<!--               status="success"></el-progress>-->

  <el-descriptions title="用户信息">
    <el-descriptions-item label="学生名称">{{wordCheckData.studentName}}</el-descriptions-item>
    <el-descriptions-item label="入学年份">{{wordCheckData.schoolDate}}</el-descriptions-item>
    <el-descriptions-item label="班级">
      <el-tag size="small">{{wordCheckData.className}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="小组">
      <el-tag size="small">{{wordCheckData.groupName}}</el-tag>
    </el-descriptions-item>

    <el-descriptions-item label="单词总数">{{wordCheckData.workCountAll}}</el-descriptions-item>

    <el-descriptions-item label="正确总数">{{wordCheckData.workTrueCount}}</el-descriptions-item>

    <el-descriptions-item label="提交时间">{{wordCheckData.createTime}}</el-descriptions-item>
  </el-descriptions>

  <el-table :data="wordCheckData.wordCheckDetailList" border>
    <el-table-column label="听写单词">
      <template slot-scope="scope">
        <span>{{scope.row.wordChinese}}</span>
      </template>
    </el-table-column>

    <el-table-column label="填写内容" >
<!--      slot-scope="scope" :style="scope.row.wordInput==1?'#67c23a':'#e5765b'"-->
      <template slot-scope="scope" >
        <span :style="{'background': scope.row.wordTrueStatus===1?'#67c23a':'#e5765b'}">{{scope.row.wordInput}}</span>
      </template>
    </el-table-column>

    <el-table-column label="正确答案">
      <template slot-scope="scope">
        <span>{{scope.row.wordEnglish}}</span>
      </template>
    </el-table-column>

  </el-table>

</div>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        name: "word-check-detail",
      data() {
        return {
          // percentage:60,
          wordCheckId:"221121C8MR9R55YW",
          wordData: {
            wordCheckDetailList: [],
          }
        }
      },

      methods :{

      },
      mounted() {
        //mounted 是vue的生命周期函数中的其中一个，表示，页面加载完毕执行
      },
      computed:{
        //映射 sportStudent模块下的 studentUser对象
        ...mapState('wordCheck', ['wordCheckData'])
      },
      created() {
      }

    }
</script>

<style scoped>

</style>
